<template>
	<view class="">
		<!-- 导航栏 -->
		<view :class="getClass">
			<!-- 状态栏 在不同机型下状态栏不一样，因此需要动态获取 APP端-->
			<view class="" :style="'height'+statusBarHeight+'px'"></view>
			<!-- 导航 -->
			<view class="w-100 flex align-center justify-between" style="height: 90rpx;">
				<!-- 左边 -->
				<view class="flex align-center">
					<!-- 标题 -->
					<slot name="title">
						<text v-if="title" class="font-md ml-3">{{title}}</text>
					</slot>
				</view>
				<!-- 右边 -->
				<view class="flex align-center">
					<slot name="right">
						<liweijianIconButton @click="search">&#xe6e3;</liweijianIconButton>
						<liweijianIconButton @click="openExtend">&#xe682;</liweijianIconButton>
					</slot>
				</view>
			</view>
		</view>
		<!-- 占位 -->
		<view :style="fixedStyle" v-if="fixed"></view>
		
		<!-- 扩展菜单 -->
		<liweijianPopup v-show="showRight" ref="lwjpopup" :bodyWidth="320" :bodyHeight="525"
		bodyBgColor="bg-dark" transformOrigin="right top">
			<view class="triangle"></view>
			<view class="flex flex-column" 
			style="width: 320rpx;height: 525rpx;">
				<view class="flex-1 flex align-center" 
				hover-class="bg-hover-dark"
				v-for="(item,index) in menus"
				:key="index"
				@click="clickEvent(item)">
					<text class="iconfont pl-3 pr-2 font-md text-white">{{item.icon}}</text>
					<text class="font-md text-white">{{item.name}}</text>
				</view>
			</view>
		</liweijianPopup>

	</view>
</template>

<script>
	import liweijianIconButton from './liweijian-icon-button.vue';
	import liweijianPopup from './liweijian-popup.vue';

	export default {
		name: "liweijian-nav-bar",
		props: {
			// 导航栏左侧标题
			title: {
				type: [String, Boolean],
				default: false
			},
			// 导航栏是否固定定位
			fixed: {
				type: Boolean,
				default: true
			},
			// 是否显示右侧弹出层
			showRight:{
				type:Boolean,
				default:true
			},
			// 背景颜色
			bgColor: {
				type: String,
				default: "bg-light"
			}
		},
		components: {
			liweijianIconButton,
			liweijianPopup,
		},
		data() {
			return {
				statusBarHeight: 0,
				naviBarHeight: 0,
				// 扩展菜单
				menus: [{
						name:"发起群聊",
						event:"navigateTo",
						path:"/pages/mail/mail/mail?type=createGroup",
						icon:"\ue633"
					},
					{
						name:"添加好友",
						event:"navigateTo",
						path:"/pages/common/search/search",
						icon:"\ue65d"
					},
					// #ifndef H5
					{
						name:"扫一扫",
						event:"scan",
						icon:"\ue614"
					},
					// #endif
					{
						name:"收付款",
						event:"",
						icon:"\ue66c"
					},
					{
						name:"帮助与反馈",
						event:"",
						icon:"\ue66c"
					}
				],
				// 
			}
		},
		mounted() {
			// #ifdef APP-PLUS-NVUE
			this.statusBarHeight = plus.navigator.getStatusbarHeight()
			// #endif
			this.naviBarHeight = this.statusBarHeight + uni.upx2px(90)

		},
		computed: {
			fixedStyle() {
				return `height: ${this.naviBarHeight}px`;
			},
			getClass() {
				let fixed = this.fixed ? 'fixed-top' : '';
				return `${fixed} ${this.bgColor}`;
			},
		},
		methods: {
			// 点击搜索图标
			search() {},
			// 点击加号图标
			openExtend() {
				this.$refs.lwjpopup.show(uni.upx2px(415),uni.upx2px(106));
			},
			// 弹出层扩展菜单item项点击事件
			clickEvent(item) {
				// console.log(item);
				this.$refs.lwjpopup.hide()
			},
		},
	}
</script>

<style lang="scss" scoped>
	.triangle {
	  width: 0;
	  height: 0;
	  border-left: 15rpx solid transparent;
	  border-right: 15rpx solid transparent;
	  border-bottom: 18rpx solid rgb(53, 58, 63);
	  position: relative;
	  top: -18rpx;
	  right: -265rpx;
	}
</style>